<template>
  <div class="RobotSetup">
    <div class="viewup">
      <div class="viewup_left">
        <div class="viewleft_title">
          <p style="font-size:28px">机器人参数设置</p>
        </div>
        <div class="viewleft_titledown">
          <div class="viewleft_word1">
            <p style="font-size:18px">机器人通信中断及告警设置</p>
          </div>
          <div class="viewleft_center">
            <p class="viewselect" style="font-size:14px;margin-left:40px">
              告警后执行机制:
              <el-select v-model="value" placeholder="请选择" style="width:200px">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </p>
            <p class="viewselect" style="font-size:14px;margin-left:40px">
              中断后执行机制:
              <el-select v-model="value1" placeholder="请选择" style="width:200px">
                <el-option
                  v-for="item in options1"
                  :key="item.value1"
                  :label="item.label1"
                  :value="item.value1"
                ></el-option>
              </el-select>
            </p>
            <hr width="100%" style="border:0.1px dashed rgb(16, 156, 180);height:1px">
            <p class="viewinput" style="font-size:14px;margin-left:40px">
              机器人行进速度:
              <el-input v-model="inputspeed" placeholder="请输入内容" style="width:200px" oninput="value=value.replace(/[^0-9.]/g,'')" maxlength="15"></el-input>
              <span>m/s</span>
            </p>
            <p class="viewinput" style="font-size:14px;margin-left:55px">
              雷达报警距离:
              <el-input v-model="inputdistance" placeholder="请输入内容" style="width:200px" oninput="value=value.replace(/[^0-9.]/g,'')" maxlength="15"></el-input>
              <span>m</span>
            </p>
            <p class="viewinput" style="font-size:14px;margin-left:55px">
              电池容量报警:
              <el-input v-model="inputalarm" placeholder="请输入内容" style="width:200px" oninput="value=value.replace(/[^0-9.]/g,'')" maxlength="15"></el-input>
              <span>%</span>
            </p>
            <p></p>
            <p></p>
            <hr
              width="100%"
              style="border:0.1px dashed rgb(16, 156, 180);height:1px;margin-top:15px"
            >
            <el-button
              class="upbuttonclass"
              type="primary"
              size="medium"
              icon="el-icon-success"
              style="margin-left:73%"
            >确定</el-button>
            <el-button class="upbuttonclass" type="primary" size="medium" icon="el-icon-refresh">重置</el-button>
          </div>
          <div class="viewleft_word2">
            <p style="font-size:18px">云控制台</p>
          </div>
          <div class="viewleft_down">
            <p
              style="font-size:18px;color:red;font-family:Simsun;font-weight:bold;text-align:center"
            >云台初始化位置</p>
            <a class="viewinput" style="margin-left:15%;font-size:14px">
              X:
              <el-input v-model="inputX" placeholder="请输入内容" style="width:200px" oninput="value=value.replace(/[^0-9.]/g,'')" maxlength="15"></el-input>
            </a>
            <a style="margin-left:15%;font-size:14px" class="viewinput">
              Y:
              <el-input v-model="inputY" placeholder="请输入内容" style="width:200px" oninput="value=value.replace(/[^0-9.]/g,'')" maxlength="15"></el-input>
            </a>
            <p></p>
            <p></p>
            <hr width="100%" style="border:0.1px dashed rgb(16, 156, 180);height:1px">
            <p class="viewinput" style="font-size:14px;margin-left:40px">
              云台水平偏移量:
              <el-input v-model="inputlevel" placeholder="请输入内容" style="width:200px" oninput="value=value.replace(/[^0-9.]/g,'')" maxlength="15"></el-input>
            </p>
            <p class="viewinput" style="font-size:14px;margin-left:40px">
              云台垂直偏移量:
              <el-input v-model="inputvertical" placeholder="请输入内容" style="width:200px" oninput="value=value.replace(/[^0-9.]/g,'')" maxlength="15"></el-input>
            </p>
            <p></p>
            <p></p>
            <hr
              width="100%"
              style="border:0.1px dashed rgb(16, 156, 180);height:1px;margin-bottom:10px"
            >
            <el-button
              class="upbuttonclass"
              type="primary"
              size="medium"
              icon="el-icon-success"
              style="margin-left:73%"
            >确定</el-button>
            <el-button class="upbuttonclass" type="primary" size="medium" icon="el-icon-refresh">重置</el-button>
          </div>
        </div>
      </div>
      <div class="viewup_right">
        <div class="viewright_title">
          <p style="font-size:28px">机器人控制</p>
        </div>
        <div class="viewright_down">
          <p class="viewselect" style="margin-left:15%;font-size:17px">
            控制模式:
            <el-select v-model="value2" placeholder="请选择" style="width:200px">
              <el-option
                v-for="item in options2"
                :key="item.value2"
                :label="item.label2"
                :value="item.value2"
              ></el-option>
            </el-select>
          </p>
          <br>
          <p class="viewblock" style="font-size:17px;margin-left:240px;margin-bottom:40px">
            红外功能:
            <el-switch v-model="valueblock" active-text="开" inactive-text="关"></el-switch>
          </p>
          <p class="viewblock" style="font-size:17px;margin-left:225px;margin-bottom:40px">
            可见光功能:
            <el-switch v-model="valueblock1" active-text="开" inactive-text="关"></el-switch>
          </p>
          <p class="viewblock" style="font-size:17px;margin-left:240px;margin-bottom:40px">
            雨刷功能:
            <el-switch v-model="valueblock2" active-text="开" inactive-text="关"></el-switch>
          </p>
          <p class="viewblock" style="font-size:17px;margin-left:240px;margin-bottom:40px">
            避障功能:
            <el-switch v-model="valueblock3" active-text="开" inactive-text="关"></el-switch>
          </p>
          <p class="viewblock" style="font-size:17px;margin-left:240px;margin-bottom:40px">
            车灯状态:
            <el-switch v-model="valueblock4" active-text="开" inactive-text="关"></el-switch>
          </p>
          <p class="viewblock" style="margin-left:112px;margin-bottom:40px">
            <el-select v-model="value3" placeholder="请选择" style="width:200px">
              <el-option
                v-for="item in options3"
                :key="item.value3"
                :label="item.label3"
                :value="item.value3"
              ></el-option>
            </el-select>

            <el-switch v-model="valueblock5" active-text="开" inactive-text="关"></el-switch>
          </p>
          <p class="viewblock" style="font-size:17px;margin-left:255px;margin-bottom:40px">
            充电房:
            <el-switch v-model="valueblock6" active-text="开" inactive-text="关"></el-switch>
          </p>
          <p class="viewblock" style="font-size:17px;margin-left:225px">
            机器人状态:
            <el-switch v-model="valueblock7" active-text="开" inactive-text="关"></el-switch>
          </p>
        </div>
      </div>
    </div>
    <!-- <div class="viewcenter"></div>
    <div class="viewdown">
      <el-tabs class="el-tabs-redefine" type="border-card">
        <el-tab-pane label="巡检监控">内容待定</el-tab-pane>
        <el-tab-pane label="机器人设置">
          <p>>>>机器人参数设置：需要设置的参数包括：机器人通讯中断及告警设置部分（告警后执行机制设置、中断后执行机制、机器人行进速度、雷达报警距离、电池容量报警）、云台控制部分（云台初始化位置X、Y轴、云台水平偏移量、云台垂直偏移量）;</p>
          <p>>>>机器人控制：主要实现控制模式的切换以及红外、可见光、雨刷、避障、车灯状态、充电房（前门）、充电房（后门）和机器人状态等功能的设置。</p>
        </el-tab-pane>
      </el-tabs>
    </div>-->
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  data() {
    return {
      robot_id: null,
      options: [
        {
          value: "选项1",
          label: "自动返航"
        },
        {
          value: "选项2",
          label: "待选1"
        },
        {
          value: "选项3",
          label: "待选2"
        }
      ],
      options1: [
        {
          value1: "选项1",
          label1: "原地待命"
        },
        {
          value1: "选项2",
          label1: "待选1"
        },
        {
          value1: "选项3",
          label: "待选2"
        }
      ],
      options2: [
        {
          value2: "选项1",
          label2: "任务模式"
        },
        {
          value2: "选项2",
          label2: "待定2"
        },
        {
          value2: "选项3",
          label2: "待定3"
        }
      ],
      options3: [
        {
          value3: "选项1",
          label3: "充电室前门"
        },
        {
          value3: "选项2",
          label3: "待定2"
        },
        {
          value3: "选项3",
          label3: "待定3"
        }
      ],
      inputspeed: "",
      inputdistance: "",
      inputalarm: "",
      inputX: "",
      inputY: "",
      inputlevel: "",
      inputvertical: "",
      value: "",
      value1: "",
      value2: "",
      value3: "",
      valueblock: true,
      valueblock1: true,
      valueblock2: true,
      valueblock3: true,
      valueblock4: true,
      valueblock5: true,
      valueblock6: true,
      valueblock7: true
    };
  },
  created() {
    this.robot_id = localStorage.getItem("ydRobot_id");
  },
  mounted() {},
  methods: {}
};
</script>

<style>
.RobotSetup {
  height: 100%;
  width: 100%;
  min-height: 700px;
  /* border: 10px  solid black; */
  background-color: white;
}
.RobotSetup .viewup {
  height: 680px;
  width: 100%;
}
.RobotSetup .viewcenter {
  height: 14px;
  width: 100%;
}
.RobotSetup .viewdown {
  height: 56px;
  width: 100%;
}
.RobotSetup .viewleft_title {
  height: 8%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Simsun;
  font-weight: bold;
  background: rgb(16, 156, 180);
}
.RobotSetup .viewleft_titledown {
  height: 92%;
  width: 100%;
  border: 1px solid #c0c0c0;
}
.RobotSetup .viewup_left {
  height: 680px;
  width: 50%;
  float: left;
}
.RobotSetup .viewright_title {
  height: 8%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Simsun;
  font-weight: bold;
  background: rgb(16, 156, 180);
}
.RobotSetup .viewright_down {
  height: 92%;
  width: 100%;
  border: 1px solid #c0c0c0;
  color: rgb(16, 156, 180);
}
.RobotSetup .viewleft_word1 {
  height: 7%;
  width: 100%;
  font-family: Simsun;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: red;
}
.RobotSetup .viewleft_center {
  height: 46%;
  width: 90%;
  margin: 0 auto;
  border: 1px solid rgb(16, 156, 180);
  color: rgb(16, 156, 180);
}
.RobotSetup .viewleft_word2 {
  height: 7%;
  width: 100%;
  font-family: Simsun;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: red;
}
.RobotSetup .viewleft_down {
  height: 40%;
  width: 90%;
  margin: 0 auto;
  border: 1px solid rgb(16, 156, 180);
  color: rgb(16, 156, 180);
}
.RobotSetup .viewup_right {
  height: 100%;
  width: 50%;
  float: right;
}
.RobotSetup .classone {
  height: 30px;
  width: 130px;
}
.RobotSetup .viewselect .el-select .el-input__inner {
  height: 30px;
  line-height: 30px;
}
.RobotSetup .viewblock .el-select .el-input__inner {
  height: 30px;
  line-height: 30px;
}
.RobotSetup .viewinput .el-input .el-input__inner {
  height: 25px;
  line-height: 25px;
}
.RobotSetup .viewblock .el-switch__core {
  width: 200px !important;
  height: 30px;
  margin-top: -6px;
}
.RobotSetup .viewblock .el-switch__button {
  left: 150px !important;
  width: 26px;
  height: 26px;

  transform: translate3d(-150px, 0px, 0px);
}
.RobotSetup .el-switch,
.RobotSetup .el-switch__label,
.RobotSetup .el-switch__label * {
  font-size: 17px !important;
  height: 23px;
}

.RobotSetup .viewdown .el-tabs__header {
  box-sizing: border-box;
  background: linear-gradient(rgb(227, 242, 238), rgb(202, 231, 238));
}
.RobotSetup .viewdown .el-tabs--border-card > .el-tabs__content {
  flex-grow: 1;
}
/* .el-tabs--border-card>.el-tabs__header   card属性里面的头里面item（边框类的属性） is-active 这种属于选中类的属性 */
.RobotSetup .viewdown .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  height: 30px !important;
  margin: 0px 3px 0px 3px;
  line-height: 30px;
  border: 1px solid #ccc;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  color: #000;
}
.RobotSetup
  .viewdown
  .el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item.is-active {
  border: 1px solid rgb(16, 156, 180) !important;
  border-bottom: none !important;
  background: linear-gradient(rgb(227, 242, 238), rgb(202, 231, 238));
  color: rgb(16, 156, 180);
}
</style>